<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小米官方</title>
		<script src="https://unpkg.com/vue@next"></script>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		<div class="box">
			<div class="bq">
				<span> <a href="#">手机</a> </span>
				<span> <a href="#">查看更多>></a> </span>
			</div>
			
			<div class="box1">     <!-- 209010214豆雪琴 -->
						<div id="root" v-cloak>
							<li v-for="n in phoneList">
								<a href="#">
									<div class="box3">
										<img :src="n.img"><!-- 遍历插入的图片 -->
										<span>{{n.name}}</span><!-- 遍历手机名字 -->
										<span>{{n.bq}}</span><!-- 遍历手机介绍 -->
										<span>{{n.price}}</span><!-- 遍历手机价格 -->
									</div>
								</a>
							</li>
						</div>
			</div>
		</div>
		<script>
			var app = Vue.createApp({
				data(){
					return{        // 设置数组
						 phoneList:[
							{id:'10001',img:'img/shouzhang.webp'},
							{id:'10002',img:'img/1.webp',name:'Redmi 12C',bq:'高性能长续航,5000万像素超清双摄',price:'699元起'},
							{id:'10003',img:'img/2.webp',name:'Redmi K60',bq:'骁龙8+│2K高光直屏|5500mAh+67',price:'2499元起'},
							{id:'10004',img:'img/3.webp',name:'Redmi K60 Pro',bq:'【第二代骁龙8】狂暴引擎',price:'3299元起'},
							{id:'10005',img:'img/4.webp',name:'Redmi Node 12 Pro 极速版',bq:'高通骁龙778G,OLED柔性直屏+—亿',price:'1699元起'},
							{id:'10006',img:'img/5.webp',name:'Redmi13 限量定制色',bq:'全新第二代骁龙8│徕卡专业光学镜头',price:'4999元起'},
							{id:'10007',img:'img/6.webp',name:'Redmi 13 Pro',bq:'全新第二代骁龙8|徕卡专业光学镜头',price:'4999元起'},
							{id:'10008',img:'img/7.webp',nane:'Redmi 13',bq:'全新第二代骁龙8|徕卡专业光学镜头',price:'3999元起'},
							{id:'10009',img:'img/8.webp',name:'Redmi Note 12 5G',bq:'三星OLED 护眼屏│骁龙5G芯|50',price:'1199元起'},
						]
					}
				}
			}).mount('#root');
			 
		</script>
	</body>
</html>
